<!doctype html>
<html>
<head>
	<meta charset="utf-8"><meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>课堂</title>
	<link rel="stylesheet" type="text/css" href="../../lib/css/skin.css"/>
</head>
<body>
<div id="root">
	<div class="app_warp">
		<div class="app_head">
			<!--<span class="left back"></span>-->
			<span class="name">课堂</span>
			<span class="right search"></span>
		</div>
		<div class="app_col_nav clearfix">
			<div class="component_loading"></div>
			<div id="classroom_nav" class="app_col_inner_nav menuflex"></div>
		</div>
		<div id="classroom_swiper" class="clearfix">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="../../res/ad/swiper_init.png" alt="">
					</div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
		</div>
		<div class="app_main">
			<div class="space"></div>
			<div class="app_box">
				<div class="box_cont padding_box">
					<ul id="classroom_list" class="list_item line_list biger clearfix"></ul>
				</div>
			</div>
			<div class="loading_line">
				<a href="javascript:;" class="loading_more"></a>
			</div>
		</div>
	</div>
</div>

<script id="swiper_template" type="text/html">
	<%for(var i in data) {%>
	<div class="swiper-slide">
		<img class="imgcache rem16" src="<%:=img%>" data_src="<%:=data[i].cover%>" tapmode onclick="_$.getPage('<%:=data[i].link%>')"
		     alt="">
	</div>
	<%}%>
</script>
<script id="classroom_nav_template" type="text/html">
	<%for(var i in data) {%>
	<a href="javascript:;" tapmode onclick="navClick(<%:=data[i].id%>,this,<%:=i%>)" class="<%:=data[i].id===0?'active':''%>"><%:=data[i].name%></a>
	<%}%>
</script>
<script id="classroom_list_template" type="text/html">
	<%for(var i in data) {%>
	<li tapmode onclick="_$.getView('class',<%:=data[i].id%>,this)">
		<img class="pic imgcache" src="<%:=img%>" data_src="<%:=data[i].cover%>" alt="">
		<span class="title">
				<%:=data[i].title%>
			</span>
		<span class="intro">
				<%:=data[i].author%> <%:=data[i].viewnum%>
			</span>
		<span class="tag tag_skin"><%:=data[i].integral===0?'免费':(data[i].integral+'积分')%></span>
	</li>
	<%}%>
</script>
<script>
	var
		//nav的当前索引
		classIndex = 0,
		classID = 0,
		//存储所有的分类下的已知数据
		classData = null,
		loadingBtn=null,
		nocontentHtml='<li class="nocontent por animated fadeInUp"><img src="../../lib/img/noclass.png" alt=""><div class="text">暂时没有此类课程</div></li>';

		//导航初始化方法
		classroomNavInit = function () {
			_$.db.get({
				key: 'classify',
				call: function (data) {
					_$.template('classroom_nav_template', {'data': data}, function (html) {
						$('#classroom_nav').html(html);
						var w = 0, as = $('.classroom_nav a');
						for (var i = 0; i < as.length; i++) {
							w += (as.eq(i).width());
						}
						_$.sleep(function () {
							$('.component_loading').fadeOut(function () {
								$('.app_col_inner_nav').addClass('loaded animated fadeIn');
							});
						}, 1000);
					});
				}
			});
		},
		classroomHtmlRun = function (id,index) {
			classID = id;
			classIndex = index;
			var data = classData[classIndex];
			if (data === undefined) {
				$('#classroom_list').html(nocontentHtml);
				loadingBtn.addClass('active');
				loadmore(id);
			}else{
				_$.template('classroom_list_template', {'data': data}, function (html) {
					$('#classroom_list').html('').append(html);
					_$.imgCache.load();
				})
			}
		},
		swiperInit = function () {
			_$.db.get({
				key: 'classroom_swiper',
				call: function (data, img) {
					_$.template('swiper_template', {'data': data, 'img': img}, function (html) {
						$('#classroom_swiper .swiper-wrapper').html(html);
						_$.imgCache.load(function () {
							var swiper = new Swiper('.swiper-container', {
								pagination: '.swiper-pagination',
								loop: true
							});
						});
					});
				}
			})
		},
		loadmore = function (id) {

			var list = $('#classroom_list'),
				setting = {
				tag: 'classroom_list',
				number: list.find('li').length,
				cnum: classID
			},
			_data_ = classData[classIndex];

			if (id !== undefined) {
				classID = id;
				setting.number = 0;
				setting.cnum = id;
				$('#classroom_list').html('');
			}

			_$.ajax({
				interface: 'search',
				data: setting,
				call: function (data) {
					if (data.status===200) {

						_$.template('classroom_list_template', {'data': data.data}, function (html) {
							$('#classroom_list').append(html);
							_$.imgCache.load();
						})

						//将新数据合并进去
						if(_data_===undefined){
							_data_=[]
						}
						data.data.map(function(thisData){
							_data_.push(thisData);
						})
						classData[classIndex] = _data_;

						_$.sleep(function(){
							loadingBtn.removeClass('active');
						},1000);

					} else if(data.status===201){
						if(id!==undefined){
							$('#classroom_list').html(nocontentHtml);
						}
						loadingBtn.off('click').removeClass('active').addClass('nomore');
					} else{
						api.toast({
							msg:data.msg
						})
					}
				}
			})

		},
		navClick = function (id, obj) {
			obj = $(obj);
			obj.siblings().removeClass('active');
			obj.addClass('active');
			classroomHtmlRun(id,obj.index());
			loadingBtn.removeClass('nomore').on('click',function(){
				loadmore();
			});
		},
		appready = function () {
			loadingBtn=$('.loading_more');
			swiperInit();
			classroomNavInit();
			_$.db.get({
				key: 'classroom_list',
				call: function (data) {
					classData = [data];
					classroomHtmlRun(0, 0);
				}
			})
			loadingBtn.on('click', function () {
				$(this).addClass('active');
				loadmore();
			})
		};

</script>
<script src="../../lib/js/config.js"></script>
<script src="../../lib/js/jquery.js"></script>
<script src="../../lib/js/swiper.js"></script>
<script src="../../lib/js/common.js"></script>
</body>
</html>